<template>
  <q-layout view="hHh lpR fFf ">

    <q-header bordered class="bg-primary text-white">
      <q-toolbar>
        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />

        <q-toolbar-title>
          干旱事件应对策略智能推荐系统
        </q-toolbar-title>
      </q-toolbar>
    </q-header>

    <q-drawer v-model="leftDrawerOpen" side="left"  bordered>
      <q-list bordered separator padding>
        <q-item clickable class="tw-mt-4"  to="/index">
          <q-item-section class="tw-text-2xl" >历史案例查询 </q-item-section>
        </q-item>
        <q-item clickable class="tw-mt-4"  to="/sim">
          <q-item-section class="tw-text-2xl"  >案例相似度分析</q-item-section>
        </q-item>
        <q-item clickable class="tw-mt-4"  to="/decision">
          <q-item-section class="tw-text-2xl" >智能决策推荐</q-item-section>
        </q-item>
        <q-item clickable class="tw-mt-4"  to="/risk">
          <q-item-section class="tw-text-2xl" >旱灾风险评估 </q-item-section>
        </q-item>
        <q-item clickable class="tw-mt-4"  to="/water">
          <q-item-section class="tw-text-2xl">水资源配置</q-item-section>
        </q-item>
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>

  </q-layout>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const leftDrawerOpen = ref(true)

    return {
      leftDrawerOpen,
      toggleLeftDrawer () {
        leftDrawerOpen.value = !leftDrawerOpen.value
      }
    }
  }
}
</script>
